<script setup lang="ts">
import { useI18n } from "vue-i18n";
import MenuFrom from "./MenuFrom.vue";
import api from "@/plugins/http";
import type { ResponseResult } from "@/types/Response";
import ToolTipDialog from "@/components/global/ToolTipDialog.vue";

const { t } = useI18n();

const headers = computed(() => [
  { title: t("MenuName"), key: "menuName", sortable: true },
  { title: t("IconName"), key: "iconName", sortable: true },
  { title: t("RouteName"), key: "routeName", sortable: true },
  { title: t("ComponentPath"), key: "componentPath", sortable: true },
  { title: t("IsHidden"), key: "isHidden", sortable: true },
  { title: t("Sort"), key: "sort", sortable: true },
  { title: t("Operation"), key: "operation", sortable: true },
]);

const items = ref();

const pageSize = ref<number>(10);
const page = ref<number>(1);

const search = ref("");
const dialog = ref(false);
const toolTipDialogRef = ref();

const closeDialog = () => {
  dialog.value = false;
  menuItem.value = "";
  GetMenuItems();
};
const openDialog = (item: any) => {
  if (item) {
    menuItem.value = item;
  }
  dialog.value = true;
};

const selected = ref([]);

const menuItem = ref();

const GetMenuItems = () => {
  api.get("/api/MenuManager/GetMenuItems", "", "", (res: ResponseResult) => {
    items.value = res.data;
  });
};

const DeletedItems = () => {
  if (selected.value.length < 1) {
    toolTipDialogRef.value.OpenDialog(t("SelectOneData"));
    return;
  }

  toolTipDialogRef.value.OpenDialog(t("ConfirmProceed")).then((res: boolean) => {
    if (res) {
      api.post("/api/MenuManager/DeletedItems", selected.value, "", (res: ResponseResult) => {
        ElMessage({
          message: t("OperateSuccessfully"),
          type: res.success ? "success" : "error",
        });
        if (res.success) {
          selected.value = [];
          GetMenuItems();
        }
      });
    } else {
      ElMessage({
        message: t("CancelSuccessful"),
        type: "success",
      });
    }
  });
};

onMounted(() => {
  GetMenuItems();
});
</script>

<template>
  <v-data-table
    height="calc(var(--main-height) - 128px)"
    :search="search"
    :headers="headers"
    select-strategy="all"
    v-model:page="page"
    v-model:items-per-page="pageSize"
    v-model="selected"
    fixed-header
    show-select
    density="compact"
    :items="items"
  >
    <template #top>
      <v-row>
        <v-col cols="auto">
          <v-btn @click="openDialog(null)" icon="mdi-plus" class="mr-3" size="x-small" />
          <v-btn @click="DeletedItems" icon="mdi-delete" class="mr-3" size="x-small" />
        </v-col>

        <v-col class="d-flex justify-end">
          <!-- 剩余空间分配给文本框 -->
          <v-text-field
            label="搜索菜单"
            variant="outlined"
            v-model="search"
            density="compact"
            hide-details
            class="max-w-xs"
          />
        </v-col>
      </v-row>
    </template>

    <template #item.iconName="{ value }">
      <v-icon :icon="value" size="x-small" />
      {{ value }}
    </template>

    <template #item.isHidden="{ value }">
      <el-tag :type="value ? 'primary' : 'danger'">
        {{ value ? $t("status.True") : $t("False") }}
      </el-tag>
    </template>

    <template v-slot:item.operation="{ item }">
      <div class="d-flex ga-2 justify-end">
        <v-icon
          @click="openDialog(item)"
          color="medium-emphasis"
          icon="mdi-pencil"
          size="small"
        ></v-icon>
      </div>
    </template>
  </v-data-table>

  <MenuFrom
    v-if="dialog"
    :menuItem="menuItem"
    :Items="items"
    @closeDialog="closeDialog"
    :dialog="dialog"
  />

  <ToolTipDialog ref="toolTipDialogRef" />
</template>

<style scoped>
.v-data-table {
  padding: 10px;
}
</style>
